<template>
    <div id="tableRunTaskBody">
        <!--分页组件-->
        <el-table style="width: 100%" stripe border @selection-change="handleSelectionChange" highlight-current-row
            :data="dataList">
            <!-- 复选框 -->
            <el-table-column type="selection" width="40"></el-table-column>
            <el-table-column label="序号" min-width="50">
                <template slot-scope="scope">
                    {{ scope.$index + 1 }}
                </template>
            </el-table-column>
            <el-table-column align="left" prop="rev" show-overflow-tooltip label="版本号"></el-table-column>
            <el-table-column align="left" prop="type" show-overflow-tooltip label="参数类型"></el-table-column>
            <el-table-column align="left" prop="name" show-overflow-tooltip label="参数名称"></el-table-column>
            <el-table-column align="left" prop="executionId" show-overflow-tooltip label="执行实例"></el-table-column>
            <el-table-column align="center" prop="procInstId" show-overflow-tooltip label="流程实例" min-width="150">
            </el-table-column>
            <el-table-column align="left" prop="taskId" show-overflow-tooltip label="任务编号"></el-table-column>
            <el-table-column align="left" prop="byteArrayId" show-overflow-tooltip label="BYTEARRAY_ID_"
                min-width="150"></el-table-column>
            <el-table-column align="left" prop="double_" show-overflow-tooltip label="DOUBLE_"
                min-width="150"></el-table-column>
            <el-table-column align="left" prop="long_" show-overflow-tooltip label="LONG_"></el-table-column>
            <el-table-column align="left" prop="text" show-overflow-tooltip label="TEXT_"></el-table-column>
            <el-table-column align="left" prop="text2" show-overflow-tooltip label="TEXT2_"></el-table-column>
            <el-table-column align="center" label="操作" fixed="left" min-width="80">
                <template slot-scope="scope">
                    <a href="javascript:;" @click="delActRuVariable(scope.row)" class="btn btn-sm btn-clean btn-icon"
                        title="删除">
                        <span class="svg-icon svg-icon-primary svg-icon-2x">
                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px"
                                height="24px" viewBox="0 0 24 24" version="1.1">
                                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                    <rect x="0" y="0" width="24" height="24" />
                                    <path
                                        d="M6,8 L6,20.5 C6,21.3284271 6.67157288,22 7.5,22 L16.5,22 C17.3284271,22 18,21.3284271 18,20.5 L18,8 L6,8 Z"
                                        fill="#000000" fill-rule="nonzero" />
                                    <path
                                        d="M14,4.5 L14,4 C14,3.44771525 13.5522847,3 13,3 L11,3 C10.4477153,3 10,3.44771525 10,4 L10,4.5 L5.5,4.5 C5.22385763,4.5 5,4.72385763 5,
                                            5 L5,5.5 C5,5.77614237 5.22385763,6 5.5,6 L18.5,6 C18.7761424,6 19,5.77614237 19,5.5 L19,5 C19,4.72385763 18.7761424,4.5 18.5,4.5 L14,4.5 Z"
                                        fill="#000000" opacity="0.3" />
                                </g>
                            </svg>
                        </span>
                    </a>
                </template>
            </el-table-column>
        </el-table>
        <div class="block">
            <el-pagination hide-on-single-page @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="pageNo" :page-sizes="[5, 10, 30, 50]" :page-size="pageSize"
                layout="->,total, sizes, prev, pager, next, jumper" :total="totalCount">
            </el-pagination>
        </div>
    </div>
</template>
<script>
import apiUtil from "@/core/util/apiUtil.js";
import { handleNotify, handleAlert, handleConfirm, showWating, closeWating, dateformat } from "@/core/util/jehcUtil.js";
export default {
    data() {
        return {
            searchForm: { procInstId: "" },
            dataList: [],
            sels: [], //当前选框选中的值
            pageNo: 1,      // 默认当前是第一页
            pageSize: 5,    // 当前每页的数据是5条
            totalCount: 0,   // 总数默认为0
        }
    },
    components: {

    },
    props: {
        procInstId: null,
        executionId: null,
    },
    watch: {
    },
    mounted() {
        this.initApply();
    },
    methods: {
        initApply() {
            this.restForm();
            this.searchForm.procInstId = this.procInstId;
            this.initList();
        },
        restForm() {
            //重置
            Object.assign(this.$data.searchForm, this.$options.data().searchForm);
        },
        initList() {
            showWating({ renderBody: "tableRunTaskBody" });
            var params = {};
            params.usePageNo = true;//采用第几页进行分页（兼容）
            params.pageSize = this.pageSize;//页面显示记录条数，在页面显示每页显示多少项的时候
            params.pageNo = this.pageNo;//开始的记录序号   
            params.searchJson = JSON.stringify(this.searchForm);//为form元素     
            apiUtil.queryPage(process.env.VUE_APP_WORKFLOW_API + "/actRuVariable/list", params).then(({ data }) => {
                this.dataList = data.data;//给结果集赋值
                this.totalCount = data.total;// 获取当前数据的总数    
            });
        },
        handleSelectionChange(sels) {//获取选中的值
            this.sels = sels;
        },
        handleSizeChange(val) { // 修改每页所存数据量的值所触发的函数
            this.pageSize = val;  // 修改页的大小
            this.initList();       // 按新的pageNo和pageSize进行查询
        },
        handleCurrentChange(val) { // 修改当前页所触发的函数
            this.pageNo = val;       // 更新当前的页
            this.initList();          // 按新的pageNo和pageSize进行查询
        },
        search() {
            this.pageNo = 1;       // 更新当前的页
            this.initList();          // 按新的pageNo和pageSize进行查询
        },
        resetAll() {
            Object.assign(this.$data.searchForm, this.$options.data().searchForm);
            this.search();
        },
        delActRuVariable(row) {
            // 删除前提示
            this.$confirm("确认删除记录吗?", "提示", { type: "warning", }).then(() => {
                let params = { id: row.id, procInstId: row.procInstId };
                apiUtil.delete(process.env.VUE_APP_WORKFLOW_API + "/actRuVariable/delete", params).then(data => {
                    if (data.data.success) {
                        handleAlert("删除成功", "success", 3);
                        this.search();
                    } else {
                        handleAlert("删除失败", "error", 3);
                    }
                });
            }).catch(() => { });//注意这里，这里是重点！！！;        
        }
    }
}
</script>